<!-- 计算器 -->

<template>
  <WebForm path="calculator" class="ConfigCarbon-MyCalculator">
    <div>
      <FormInput
        v-if="CORE.MAP.ENERGY_HAS_ELEC"
        label="用电 ="
        bind="electric"
        tip="请输入"
        suffix="kW·h"
        number
        @change="toChange"
      />
      <FormInput
        v-if="CORE.MAP.ENERGY_HAS_WATER"
        label="用水 ="
        bind="water"
        tip="请输入"
        suffix="t"
        number
        @change="toChange"
      />
      <FormInput
        v-if="CORE.MAP.ENERGY_HAS_GAS"
        label="用气 ="
        bind="gas"
        tip="请输入"
        suffix="m³"
        number
        @change="toChange"
      />
    </div>

    <div class="flexCC">
      <i class="el-icon-d-arrow-right" />
    </div>

    <div>
      <ShowNum label="转换成标准煤 =" bind="coal" suffix="kgce" word7 />
      <ShowNum label="转换成碳排放 =" bind="carbon" suffix="kg ( 1kgce = 0.67kg )" word7 />
    </div>
  </WebForm>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'MyCalculator',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixScreen(), CORE.mixWeb('calculator', 'calculator_')],

  /**
   * 监听属性 (深度 deep 首次 immediate)
   */
  watch: {
    /**
     * 监听信息就绪
     */
    readyInfo(ready) {
      if (ready) {
        CORE.merge(this.INIT_INFO, this.info) // 保存查询结果为初始值
        this.toChange() // 更新计算结果
      }
    },
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 改变
     */
    toChange() {
      const { INIT_INFO, calculator_one: one } = this

      const elec = one.NUM * (one.electric || 0) * (INIT_INFO.electric || 0)
      const water = one.NUM * (one.water || 0) * (INIT_INFO.water || 0)
      const gas = one.NUM * (one.gas || 0) * (INIT_INFO.gas || 0)

      const coal = (elec + water + gas) / one.NUM
      const carbon = (one.coal * one.NUM) * (one.CO2 * 100) / 100 / one.NUM

      one.coal = +coal.toFixed(2)
      one.carbon = +carbon.toFixed(2)
    },
  },
}
</script>

<style lang="scss">
@import './index.scss';
</style>
